/*
 * Copyright ©
 * #  
 * @author: zw
 * @date: 2021-09-04 
 */


import { defineComponent, getCurrentInstance } from 'vue'
import './css/Input.scss'
export default defineComponent({
  name: 'SelectorInput',
  props: {
    placeholder: { type: String, requeired: true },
    modelValue: { type: String, default: '' },
  },
  setup(props, { emit, slots }) {
    const instance = getCurrentInstance();
    function onInput(evt) {
      emit('searchOptions', evt.target.value);
    }
    function onFocus(evt) {
      emit('searchOptions', evt.target.value);
    }
    function onBlur(value) {
      const _input = instance.refs.inputValue;
      if (_input.value.length > 0) {
        _input.value = value;
      }
    }
    return () => {
      const { placeholder, modelValue } = props;
      return (
        <div class='selector-input'>
          <label for="selector-input-label-name" class="placeholder">{placeholder}</label>
          <input
            id="selector-input-label-name"
            class="input"
            type="text"
            ref="inputValue"
            onInput={onInput}
            onFocus={onFocus}
            onBlur={(onBlur.bind(null, modelValue))}
            value={modelValue}
            />
          <span class="iconfont icon-xiangxiajiantou"></span>
        </div>
      )
    }
  }
})
